<template>
  <div class="template-box" id="template1">
    <heardTab
      :background="background"
      :position="position"
      @pathChild="pathChild"
      :flag="flag"
      @changeFlag="changeFlag"
    />
    <div class="conetent" id="template1Box">
      <!-- <router-view></router-view> -->
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component"></component>
        </keep-alive>
        <!-- <keep-alive
          include="exhibits,templateHome,template1,templateItemChild,itemChild1,itemChild2,pageChildItem1,pageChildItem2,pageChildItem3,pageChild2,pageChild1"
        >
          <component :is="Component"></component>
        </keep-alive> -->
      </router-view>
    </div>
    <van-overlay :show="store.textShow" @click="store.textShow = true" @touchmove.stop.prevent>
      <div class="wrapper" @click.stop>
        <img
          class="wrapper-title-img6"
          @click="store.textShow = false"
          :src="publicUrls + 'customized/zjz/moreIcon2.png'"
          alt=""
        />
        <div class="wrapper-title">
          <img class="wrapper-title-img3" :src="publicUrls + 'customized/zjz/titleIcon3.png'" alt="" />
          <span>{{ store.texttitle }}</span>
          <img class="wrapper-title-img4" :src="publicUrls + 'customized/zjz/titleIcon4.png'" alt="" />
        </div>
        <div class="wrapper-html" v-html="getTextHtml(store.textInfo)"></div>
      </div>
    </van-overlay>
    <!-- <templateFooter :background="store.styleInfo.themeColor" v-model="cruuent" @setCruuent="setCruuent" /> -->
  </div>
</template>
<script lang="ts">
import { publicUrls } from '@/utils/minxin';
import { defineComponent, onActivated } from 'vue';
export default defineComponent({
  name: 'templateItem1LoopWap',
});
</script>
<script setup lang="ts">
// @ts-nocheck
import { filterHTML, getTextHtml } from '@/utils/minxin';
import { pathList, pathListLoop } from '../route';
import { useRouter, useRoute } from 'vue-router';
import heardTab from '../heardTemponents/heardTab.vue';
import templateFooter from '../footer/footer.vue';
import { ref, computed, watch, onMounted } from 'vue';
import { useProjectStore } from '@/store';

const store = useProjectStore();
const route = useRoute();
const router = useRouter();
const cruuent = ref(0);
const flag = ref(false);
const background = ref('rgba(0, 0, 0, 0.4)'); //#CFBDA8"
const position = ref('absolute'); //relative
const color = ref('#ffffff');
store.homeCurrent = -1;
store.textShow = false;
if (route.meta.position == 'absolute') {
  background.value = 'rgba(0, 0, 0, 0.4)';
  position.value = 'absolute';
} else {
  background.value = store.styleInfo.themeColor;
  position.value = 'relative';
}

watch(
  () => route,
  () => {
    // console.log('变化');
    if (route.meta.position == 'absolute') {
      background.value = 'rgba(0, 0, 0, 0.4)';
      position.value = 'absolute';
    } else {
      background.value = store.styleInfo.themeColor;
      position.value = 'relative';
    }
  },
  { deep: true },
);
watch(
  store.styleInfo,
  () => {
    if (route.meta.position == 'absolute') {
      background.value = 'rgba(0, 0, 0, 0.4)';
      position.value = 'absolute';
    } else {
      background.value = store.styleInfo.themeColor;
      position.value = 'relative';
    }
  },
  { deep: true },
);
const setCruuent = (e: number) => {
  switch (e) {
    case 0:
      router.push({
        name: route.meta.loopType ? pathListLoop[0] : pathList[0],
        query: {},
      });
      break;
    case 1:
      router.push({
        name: route.meta.loopType ? pathListLoop[1] : pathList[1],
        query: {},
      });
      break;
    case 2:
      router.push({
        name: route.meta.loopType ? pathListLoop[5] : pathList[5],
        query: {},
      });
      break;
    case 3:
      router.push({
        name: route.meta.loopType ? pathListLoop[6] : pathList[6],
        query: {},
      });
      break;
    case 4:
      router.push({
        name: route.meta.loopType ? pathListLoop[3] : pathList[3],
        query: {},
      });
      break;
    default:
      router.push({
        name: route.meta.loopType ? pathListLoop[7] : pathList[7],
        query: {},
      });
      break;
  }
};
const pathChild = (e) => {
  // if (e !== 0) {
  //   background.value = store.styleInfo.themeColor;
  //   position.value = 'relative';
  // } else {
  //   background.value = 'rgba(0, 0, 0, 0.4)';
  //   position.value = 'absolute';
  // }
};
onMounted(() => {
  // 获取目标元素
  // const myDiv = document.getElementById('template1Box');
  // // console.log(myDiv);
  // // 监听滚轮事件
  // myDiv.addEventListener('wheel', handleScroll);
  // // 滚轮事件处理程序
  // function handleScroll(event) {
  //   // 判断滚轮滚动方向
  //   const delta = Math.sign(event.deltaY);
  //   // 如果向下滚动，执行相应逻辑
  //   if (delta > 0 && !flag.value) {
  //     // 执行滚轮向下滑动时的操作
  //     // console.log('滚轮向下滑动！');
  //     flag.value = true;
  //     console.log(flag.value);
  //   }
  // }
});
const changeFlag = () => {
  flag.value = false;
};
</script>

<style lang="less" scoped>
.template-box {
  position: relative;
  width: 100%;
}

.template-box::-webkit-scrollbar {
  display: none;
}
// .conetent {
//   height: calc(100vh - 50px);
//   overflow: auto;
// }
// .conetent::-webkit-scrollbar {
//   display: none;
// }
.wrapper {
  position: relative;
  width: 343px;
  height: 572px;
  background-image: url('https://static.jiyi.show/customized/zjz/moreIcon1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
  margin-top: 47px;
  padding: 24px 20px;
}
.wrapper-title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: SJxingkai-C, SJxingkai-C;
  font-weight: 400;
  font-size: 22px;
  color: #a2463c;
  line-height: 35px;
  margin-bottom: 16px;
}
.wrapper-title-img3 {
  width: 19px;
  height: 7px;
}
.wrapper-title-img4 {
  width: 19px;
  height: 7px;
}
.wrapper-title-img6 {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
}
.wrapper-html {
  width: 303px;
  height: 473px;

  overflow: auto;
  scrollbar-width: none;
  :deep(p) {
    text-indent: 2em;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    line-height: 25px;
    margin-bottom: 12px;
  }
}
</style>
